<!DOCTYPE html>
<html lang="en">
<head>
    <title>绑定一卡通</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="${ctx}/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/weui.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/jquery-weui.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/icard.css?v=${cssVersion}">
    <link rel="stylesheet" href="${ctx}/static/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        .wx-bind-header {
            padding: 35px 0px;
        }

        .wx-bind-title {
            text-align: center;
            font-size: 34px;
            color: #2e6da4;
            font-weight: 400;
            margin: 0 15%;
        }
        .weui-label{
            font-weight: 400;
            width: 80px;
            margin-bottom: 0px;
        }

        .weui-cell {
            padding: 10px 10px 10px 35px;
        }

        .weui-vcode-btn {
            display: inline-block;
            height: 25px;
            margin-left: 5px;
            border-left: 1px solid #E5E5E5;
            line-height: 25px;
            vertical-align: middle;
            font-size: 17px;
            color: #3CC51F;
        }

        .weui-navbar__item.weui-bar__item--on {
            color: #555;
            background-color: #e1e1e1;
        }
    </style>
</head>
<body>
<header class="wx-bind-header" style="height: 20%">
    <h1 class="wx-bind-title">用户绑定</h1>
</header>

<div class="weui-tab" style="height: 65%;">
    <div class="weui-navbar">
        <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
            一卡通用户绑定
        </a>
        <a class="weui-navbar__item" href="#tab2">
            普通员工绑定
        </a>
    </div>
    <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
            <div class="weui-cells weui-cells_form " style="margin-top: 0px;margin-top: 30px;margin-bottom: 30px;">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">用户名</label></div>
                    <div class="weui-cell__bd input-group">
                        <input class="weui-input" id="username" name="username" type="text" placeholder="请输入用户名">
                    </div>
                </div>

                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
                    <div class="weui-cell__bd input-group">
                        <input class="weui-input" id="password" name="password" type="password" placeholder="请输入密码">
                    </div>
                </div>

            </div>
        </div>
        <div id="tab2" class="weui-tab__bd-item">
            <div class="weui-cells weui-cells_form " style="margin-top: 0px;margin-top: 30px;margin-bottom: 30px;">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">工号</label></div>
                    <div class="weui-cell__bd input-group">
                        <input class="weui-input" id="employeeNo" name="employeeNo" type="text" placeholder="请输入工号">
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                    <div class="weui-cell__bd input-group">
                        <input class="weui-input" id="phoneNo" name="phoneNo" type="text" placeholder="请输入手机号">
                    </div>
                </div>

                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                    <div class="weui-cell__bd input-group">
                        <input class="weui-input" id="vCode" name="vCode" type="text" placeholder="请输入验证码">
                    </div>
                    <div class="weui-cell__ft">
                        <button id="genVcodeBtn" class="weui-vcode-btn">获取验证码</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="weui-btn-area " style="height: 10%">
    <input type="hidden" id="openId" name="openId" value="${openId!}">
    <button class="weui-btn weui-btn_primary btn-color-light-blue" id="bindBtn">绑定</button>
</div>



</body>

<script src="${ctx}/static/jqweui/js/jquery-2.1.4.js"></script>
<script src="${ctx}/static/jqweui/js/jquery-weui.js?v=1.2"></script>
<script type="text/javascript">

    $(function() {

        var index = 0;
        $('.weui-navbar__item').on("click",function () {
            index = $(this).index();
        });

        var countdown = 60;

        $("#genVcodeBtn").click(function () {
            validateTime();

        });

        function validateTime(){
            if(countdown <= 0) {
                $("#genVcodeBtn").removeAttr("disabled");
                $("#genVcodeBtn").html("获取验证码");
                countdown = 60;
                return;
            } else {
                $("#genVcodeBtn").attr("disabled","disabled");
                $("#genVcodeBtn").html("重试(" + countdown + "s)");
                countdown--;
            }
            setTimeout(function() {
                validateTime();
            }, 1000)
        }

        $("#bindBtn").click(function() {

            var openId = $('#openId').val();
            if(index==0){
                var username =$('#username').val();
                var password = $('#password').val();
                if(username==""||password==""){
                    alert("用户名密码不能为空");
                    return;
                }
                $.ajax({
                    url : "${ctx}/wx/bindWxUser?type=0&username="+username+"&password="+password+"&openId="+openId,
                    type : "POST",
                    dataType:'json',
                    success : function(data) {
                        if (data.success) {
                            $.toast("绑定成功!")
                            window.location.href = "${ctx}/home"
                        } else {
                            alert(data.message);
                        }
                    },
                    error : function(data) {

                    }
                });
            }else{
                var employeeNo =$('#employeeNo').val();
                var phoneNo = $('#phoneNo').val();
                var vCode = $('#vCode').val();
                if(employeeNo==""){
                    alert("工号不能为空");
                    return;
                }
                if(phoneNo==""){
                    alert("手机号不能为空");
                    return;
                }

                if(vCode==""){
                    alert("验证码不能为空");
                    return;
                }
                $.ajax({
                    url : "${ctx}/wx/bindWxUser?type=1&employeeNo="+employeeNo+"&phoneNo="+phoneNo+"&openId="+openId+"&vCode="+vCode,
                    type : "POST",
                    dataType:'json',
                    success : function(data) {
                        if (data.success) {
                            $.toast("绑定成功!")
                            window.location.href = "${ctx}/home"
                        } else {
                            alert(data.message);
                        }
                    },
                    error : function(data) {

                    }
                });
            }

        });
    });
</script>
</html>